<template>
  <div class="screen">
    <ScaleScreen
      :width="1920"
      :height="1080"
      class="scale-wrap"
      :selfAdaption="isScale"
    >
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <!-- 头部 -->
          <iotHeader></iotHeader>
          <div class="contents">
            <div class="contetn_left">
              <!-- 在线/离线概览 -->
              <title-decoration-1
                class="contetn_left-top"
                title="在线/离线概览"
              >
                <leftTop></leftTop>
              </title-decoration-1>
              <!-- 区域信息 -->
              <title-decoration-1
                class="contetn_left-center"
                title="区域客户数量"
              >
                <leftCenter />
              </title-decoration-1>
              <!-- 接入类型 -->
              <title-decoration-1 class="contetn_left-bottom" title="监管类型">
                <leftBottom />
              </title-decoration-1>
            </div>
            <div class="contetn_center">
              <!-- 平台数据分布 -->
              <div class="colback"></div>
              <centerMap class="contetn_center-top" ref="centerMapRef" />
              <!-- <centerMap1 class="contetn_center-top" /> -->
              <!-- 监控列表 -->
              <title-decoration-1
                class="contetn_center-bottom"
                width="400px"
                title="监控列表"
              >
                <centerBottom ref="centerBottomRef" />
              </title-decoration-1>
            </div>
            <div class="contetn_right">
              <!-- 报警信息 -->
              <title-decoration-1 class="contetn_right-top" title="报警信息">
                <rightTop />
              </title-decoration-1>
              <!-- 数据记录 -->
              <title-decoration-1 class="contetn_right-bottom" title="数据记录">
                <rightBottom />
              </title-decoration-1>
            </div>
          </div>
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>
<script>
import iotHeader from "./iot-header.vue";
import leftTop from "./left-top.vue";
import leftCenter from "./left-center.vue";
import leftBottom from "./left-bottom.vue";
import centerMap from "./center-map.vue";
// import centerMap1 from './center-map1.vue'
import centerBottom from "./center-bottom.vue";

import rightTop from "./right-top.vue";
import rightBottom from "./right-bottom.vue";
export default {
  name: "iot-page",
  components: {
    iotHeader,
    leftTop,
    leftCenter,
    leftBottom,
    centerMap,
    // centerMap1,
    centerBottom,
    rightTop,
    rightBottom,
  },
  data() {
    return {
      isScale: true, // 是否进行全局适配
      loading: true,
      isFullScreen: true, // 是否全屏
      areaOptions: {},
      areaInfo: [], // 区域信息
      monitoringList: [], // 监控列表
      recordOptions: {}, //
      dataRecordList: [], // 数据记录
      tableData: [],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    // 表头样式
    tableHeaderCellStyle() {
      return {
        "background-color": "#083071 !important",
        color: "#71CDF9",
        "font-size": "14px",
        "border-bottom": "none",
        "text-align": "center",
      };
    },
    // 行样式
    rowStyle({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return {
          background: "#081843 !important",
        };
      } else {
        return {
          background: "#0e2b55 !important",
        };
      }
    },
    // 列样式
    // eslint-disable-next-line no-unused-vars
    tableCellStyle({ column, columnIndex, row, rowIndex }) {
      if (column.label === "报警") {
        if (row.alarm) {
          return {
            color: "red",
            "font-size": "14px",
            "border-bottom": "none",
            "text-align": "center",
            padding: "8px 0px",
          };
        } else {
          return {
            color: "#ddd",
            "font-size": "14px",
            "border-bottom": "none",
            "text-align": "center",
            padding: "8px 0px",
          };
        }
      } else {
        return {
          color: "#ddd",
          "font-size": "14px",
          "border-bottom": "none",
          "text-align": "center",
          padding: "8px 0px",
        };
      }
    },
    getData() {
      this.loading = false;
      this.getMonitoringList(); // 监控列表
    },
    // 监控列表
    getMonitoringList() {
      const res = {
        data: [
          {
            dept: "单位",
            gateway: "网关数",
            devices: "设备数",
            dataPoint: "数据点",
            alarm: "",
          },
          {
            dept: "单位",
            gateway: "网关数",
            devices: "设备数",
            dataPoint: "数据点",
            alarm: "",
          },
          {
            dept: "单位",
            gateway: "网关数",
            devices: "设备数",
            dataPoint: "数据点",
            alarm: "温度上限报警>120",
          },
          {
            dept: "单位",
            gateway: "网关数",
            devices: "设备数",
            dataPoint: "数据点",
            alarm: "",
          },
          {
            dept: "单位",
            gateway: "网关数",
            devices: "设备数",
            dataPoint: "数据点",
            alarm: "",
          },
        ],
      };
      this.tableData = res.data;
    },
    clickRecord() {
      console.log("报警数据");
    },
    clickHistorical() {
      console.log("历史数据");
    },
    initRecord(resData) {
      this.recordOptions = {
        color: ["#EFBA55 ", "#3778D1"],
        legend: {
          icon: "circle",
          textStyle: {
            color: "#ffffff",
          },
        },
        // tooltip: {
        //   trigger: 'axis',
        //   showContent: false
        // },
        tooltip: {
          trigger: "axis",
          // formatter: '当前：{b}个 : <br/>{b}km : {c}°C'
        },
        dataset: {
          source: resData,
        },
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },

        grid: {
          x: 30,
          y: 50,
          x2: 30,
          y2: 30,
        },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
        ],
      };
    },
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="scss" scoped>
.screen {
  width: 100%;
  height: 100%;
  background: #0a1b4c;
  .scale-wrap {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("~@/assets/images/iot/bg.png");
    background-position: left top, right bottom, left top;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-size: cover;
    // border: 1px solid red;
    .bg {
      width: 100%;
      height: 100%;
      padding: 16px 16px 10px 16px;
      box-sizing: border-box;
      .host-body {
        // 内容
        .contents {
          width: 100%;
          display: flex;
          // height: calc(100% - 60px);
          justify-content: space-between;
          .contetn_left,
          .contetn_right {
            width: 460px;
            box-sizing: border-box;
          }
          // 左侧部分
          .contetn_left-top {
            height: 180px;
          }
          .contetn_left-center {
            height: 430px;
            .area-echarts {
              width: 100%;
              height: 100% !important;
              // border: 1px solid red;
              .area-echarts_center {
                width: 100%;
                height: 100%;
              }
            }
          }
          .contetn_left-bottom {
            height: 340px;
          }
          // 中间部分
          .contetn_center {
            width: 920px;
            // background: url('~@/assets/images/iot/底座.png');
            // background-position: 50% 410px ;
            // background-repeat: no-repeat, no-repeat, repeat-x;
            // background-size: auto;
            .colback {
              -webkit-animation: icon-data 3s linear infinite;
              animation: icon-data 3s linear infinite;
              background: url("~@/assets/images/iot/底座.png") no-repeat;
              background-size: contain;
              background-position: bottom;
              // z-index: 2;
              position: absolute;
              width: 50%;
              height: 100%;
              top: 600;
              left: 0px;
              right: 0px;
              margin: auto;
              bottom: 270px;
              // border: 1px solid red;
            }
            .contetn_center-top {
              height: 610px;
            }
            .contetn_center-bottom {
              height: 340px;
              //去除边框

              ::v-deep .el-table .cell {
                border: none;
              }
              .el-table td .cell {
                padding: 15px 1;
              }
              .el-table__body-wrapper::-webkit-scrollbar {
                /* width: 0;宽度为0隐藏 */
                /* 整个表格透明就不要滚动条的背景颜色了 */
                width: 10px;
                border-radius: 2px;
              }
              .el-table__body-wrapper::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: #083071;
              }
              .el-table--group::after,
              .el-table--border::after,
              .el-table::before {
                background: none !important;
              }
              ::v-deep
                .el-table--enable-row-hover
                .el-table__body
                tr:hover
                > td {
                background-color: #2f4b74;
              }
            }
          }
          // 右侧部分
          .contetn_right-top {
            height: 610px;
          }
          .contetn_right-bottom {
            height: 340px;
          }
        }
      }
    }
  }
}
@-webkit-keyframes icon-data {
  0% {
    opacity: 0.8;
    transform: translate(0);
  }
  50% {
    opacity: 1;
    transform: translate(5px, 15px);
  }
  to {
    opacity: 0.8;
    transform: translate(0);
  }
}
@keyframes icon-data {
  0% {
    opacity: 0.8;
    transform: translate(0);
  }
  50% {
    opacity: 1;
    transform: translate(5px, 15px);
  }
  to {
    opacity: 0.8;
    transform: translate(0);
  }
}
</style>
